<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!--    <script th:src="@{../assets/jquery/jquery.js}"></script>-->
<!--    <meta charset="UTF-8">-->
<!--    <link type="text/css" th:href="@{../assets/css/theme.css}" rel="stylesheet">-->
<!--    <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>-->
<!--    <script src="https://kit.fontawesome.com/7a1d53a13a.js" crossorigin="anonymous"></script>-->
    <link type="text/css" th:href="@{../assets/dist/css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{../assets/jquery/jquery.js}"></script>
    <script type="text/javascript" th:src="@{../assets/dist/js/bootstrap.bundle.min.js}"></script>

    <style>
        body {
            padding-top: 70px; /* 通过增加顶部padding来向下移动整个页面内容 */
            background-size:100%;
        }

        .container {
            margin-top: 70px; /* 通过增加顶部margin来向下移动特定的容器 */
        }
        .modal-dialog {
            margin-right: 40px; /* 设置左边距为auto，使登录框向右移动 */
        }
    </style>
    <title>Title</title>
</head>
<body th:style="'background-image: url(../assets/images/backgrounds/img5.png)'">
<div class="modal modal-signin position-static d-block  py-5" tabindex="-1" role="dialog" id="modalSignin">
    <div class="modal-dialog" role="document">
        <div class="modal-content rounded-4 shadow">
            <div class="modal-header p-5 pb-4 border-bottom-0">
                <!-- <h1 class="modal-title fs-5" >Modal title</h1> -->
                <h1 class="fw-bold mb-0 fs-2">验证码登录</h1>
            </div>

            <div class="modal-body p-5 pt-0">
                <form th:action="@{check}">
                    <div class="form-floating mb-3">
                        <input type="text" class="form-control rounded-3" id="input_qq" placeholder="QQ号" name="input_qq">
                        <label for="input_qq">QQ号</label>
                    </div>

                        <div class="form-floating mb-3">
                            <input type="password" class="form-control rounded-3" id="floatingPassword" placeholder="验证码" name="verifycode">
                            <label for="floatingPassword">验证码</label>
                        </div>
                            <input type="button" class="btn btn-outline-primary get-code-btn" id="fetchDataBtn" onclick="settime(this)" value="获取验证码"></input>

                    <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="submit">登录</button>
                    <div class="form-group">
                        <div class="custom-control custom-radio mb-3">
                            <input type="radio" name="custom-radio-1"  class="custom-control-input" id="customRadio2" checked="">
                            <label class="custom-control-label" for="customRadio2">
                                已阅读并同意<a th:href="@{/to/protocal}">《电竞社交平台用户协议》</a>
                            </label>
                        </div>
                    </div>
                    <hr class="my-4">
                    <h2 class="fs-5 fw-bold mb-3">其他登录方式</h2>
                    <a th:href="@{/to/login}" class="text-white">
                        <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="button">
                            <svg class="bi me-1" width="16" height="16"></svg>
                            密码登录
                        </button>
                    </a>

                </form>
            </div>
        </div>
    </div>
</div>

</body>
</html>
<script>
    $(document).ready(function() {
        // 当按钮被点击时，执行 Ajax 请求
        $('#fetchDataBtn').click(function(e) {
            e.preventDefault(); // 阻止表单提交

            // 获取用户输入的 QQ 号
            var qq = $('#input_qq').val();

            // 发起 GET 请求到服务器端接口
            $.ajax({
                url: "http://localhost:8080/email/sendEmail",
                method: 'GET',
                data: { emailReceiver: qq },
                success: function(data) {
                    // 成功接收到响应后执行的回调函数
                    $('#result').html('<p>' + data.message + '</p>');
                },
                error: function(xhr, status, error) {
                    // 请求失败时执行的回调函数
                    console.error('Ajax 请求失败：', status, error);
                }
            });
        });
    });
</script>
<script>
    var countdown=60;        //初始值
    function settime(val) {
        if (countdown === 0) {
            val.removeAttribute("disabled");
            val.value="获取验证码";
            countdown = 60;
            return false;
        } else {
            val.setAttribute("disabled", true);
            val.value="重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function() {   //设置一个定时器，每秒刷新一次
            settime(val);
        },1000);
    }
</script>